<template>
<div class="workpage">
	<div class="workpageconts backTop">
		<div class="workpagecontsLeft">
			<!-- 技术标签分类 -->
			<div class="workClass">
				<h3 class="workClassTitle">标签分类：</h3>
				<ul class="workClassNames clearfix">
					<li class="workClassLis fl" @click="workClassLisClick('all')"><i class="masks"></i>全部</li>
					<li class="workClassLis fl" @click="workClassLisClick('html')"><i class="masks"></i>Html/Html5</li>
					<li class="workClassLis fl" @click="workClassLisClick('css')"><i class="masks"></i>CSS/CSS3</li>
					<li class="workClassLis fl" @click="workClassLisClick('js')"><i class="masks"></i>JavaScript</li>
					<li class="workClassLis fl" @click="workClassLisClick('jq')"><i class="masks"></i>Jquery</li>
					<li class="workClassLis fl" @click="workClassLisClick('node')"><i class="masks"></i>Node</li>
					<li class="workClassLis fl" @click="workClassLisClick('vue')"><i class="masks"></i>Vue</li>
				</ul>
			</div>
			<!-- 技术文章列表 -->
			<div class="workArticleBox">
				<h3 class="workClassTitle">文章列表</h3>
				<ul class="workArticleConts" v-if="artItemData.length">
					<li class="workArticleLis" v-for="item in artItemData" :key="item.id" @click="showArtDetail(item.id)" :id="item.id">
						<Card>
							<div class="careBoxAuto clearfix">
								<!-- 文章列表左侧的图片 -->
								<div class="artLisImgBox fl"><img :src="item.artLeftImg" alt=""></div>
								<!-- 文章列表右侧的信息相关 -->
								<div class="artLisContBox fl">
									<!-- 标题 -->
									<h3>{{item.title}}</h3>
									<!-- 作者、日期、分类、来源等信息说明 -->
									<ul class="artLisInfoBox clearfix">
										<li class="fl">作者：{{item.author}}</li>
										<li class="fl">时间：{{item.writeTime}}</li>
										<li class="fl">标签：{{item.artMark}}</li>
										<li class="fl">来源：{{item.sources}}</li>
									</ul>
									<p class="artLisCont">{{item.info}}</p>
									<ul class="artLisStatus clearfix">
										<li class="fl"><Icon type="ios-heart-outline"></Icon> 赞 {{item.praiseNum}}</li>
										<li class="fl"><Icon type="ios-chatboxes-outline"></Icon> 评论 {{item.discussNum}}</li>
									</ul>
								</div>
							</div>
						</Card>
					</li>
				</ul>
				<div class="nullData" v-else>该标签下暂时没有相关文章，敬请期待！</div>
			</div>
		</div>
		<div class="workpagecontsRight">
			<!-- 闲聊技术页面的右侧部分 -->
			<pageContRight></pageContRight>
		</div>
		<Spin size="large" fix v-if="spinShow"></Spin>
	</div>
</div>
</template>

<script src="../../../static/js/workpage.js"></script>
<style src="../../../static/css/workpage.css"></style>